<mat-card>
  <mat-card-header>
    <mat-card-title>Heroes</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <ul class="heroes">
      <li *ngFor="let hero of heroes; trackBy: byId" class="item-container">
        <button mat-button mat-suffix mat-icon-button color="accent" class="delete-button" aria-label="Delete" (click)="deleteHero(hero)"
          matTooltip="Delete the hero">
          <mat-icon>delete</mat-icon>
        </button>
        <div class="selectable-item" [class.selected]="hero === selectedHero">
          <div class="badge">{{hero.id}}</div>
          <div class="item-text" (click)="onSelect(hero)">
            <div class="name">{{hero.name}}</div>
            <div class="saying">{{hero.saying}}</div>
          </div>
        </div>
      </li>
    </ul>
  </mat-card-content>
</mat-card>
